<!--
* Created by Sean on 2017/11/9.
* Cancel Order Detail 退租详情
-->
<template>
  <div id="cancelOrder" class="cancel-order actWrap">
    <header class="header">
      <p>合计（元）</p>
      <p class="money">0.00</p>
    </header>
    <group>
      <x-input :show-clear="false"title="退租时间" :value="orderInfo.order && orderInfo.order.money" text-align="right">元</x-input>
      <x-input :show-clear="false"title="合约租期" :value="orderInfo.order && orderInfo.order.dMoney + ' 元'" text-align="right" disabled="">元</x-input>
    </group>
    <group title="应退详情">
      <x-input :show-clear="false"title="租金" :value="orderInfo.order && orderInfo.order.money" text-align="right">元</x-input>
      <x-input :show-clear="false"title="押金" :value="orderInfo.order && orderInfo.order.dMoney + ' 元'" text-align="right" disabled="">元</x-input>
      <cell title="违约金" :value="orderInfo.order && orderInfo.order.strataFee + ' 元'"></cell>
      <cell title="服务费" :value="orderInfo.housePersons && orderInfo.order.serviceCharge"></cell>
    </group>
    <group title="应收详情">
      <x-input :show-clear="false"title="违约金" :value="orderInfo.order && orderInfo.order.money" text-align="right">元</x-input>
      <x-input :show-clear="false"title="押金" :value="orderInfo.order && orderInfo.order.dMoney + ' 元'" text-align="right" disabled="">元</x-input>
      <cell title="备注" :value="orderInfo.order && orderInfo.order.strataFee + ' 元'"></cell>
    </group>
    <div class="btn-wrapper">
      <x-button type="primary" @click.native="confirm">申请退租</x-button>
    </div>
    </div>
</template>
<script>
  import { Group, Cell } from 'vux'
  export default {
    name: 'cancelOrder',
    components: {
      Group,
      Cell
    },
    data () {
      return {
        orderInfo: {}
      }
    }
  }
</script>
<style lang="less">
  .cancel-order {
    .header {
      height: 75px;
      padding: 12px 15px;
      background: #4791f5;
      box-sizing: border-box;
      p {
        font-size: 15px;
        line-height: 1;
        color: #fff;
      }
      .money {
        margin-top: 12px;
        font-size: 25px;
      }
    }
    .btn-wrapper {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
      display: flex;
      .weui-btn {
        margin-top: 0;
        border-radius: 0;
      }
    }
  }
</style>
